<template>
  <template v-for="(item, index) in items">
    <div class="search-list-item">
      <!-- swiper -->
      <div class="swiper">
        <van-swipe>
          <template v-for="(item, index) in item.pictureList" :key="index">
            <!-- 轮播图 -->
            <van-swipe-item>
              <div class="banner">
                <img class="banner-img" :src="item" alt="" />
              </div>
            </van-swipe-item>
          </template>
          <!-- 分页器 -->
          <template #indicator="{ active, total }">
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
          </template>
        </van-swipe>
        <!-- 评分 -->
        <div class="bottom">
          <span class="score">{{ item.commentBrief.overall }}分</span>
          <span class="bottom-text">
            {{ item.commentBrief.commentBrief }}
          </span>
        </div>
        <!-- 侧边栏 -->
        <div class="side-bar">
          <img class="logoUrl" :src="item.logoUrl" alt="" />
          <div class="heart">
            <img
              class="heart-img"
              src="@/assets/img/search/tj-mob-ui_unit-item_collected-new.png"
              alt=""
            />
            <span class="heart-text">{{ item.favoriteCount }}</span>
          </div>
          <div class="message">
            <img
              class="message-img"
              src="@/assets/img/search/tj-mob-ui_unit-item_comment-new.png"
              alt=""
            />
            <span class="message-text">{{ item.distance }}</span>
          </div>
        </div>
      </div>

      <div class="content">
        <!-- 广场 -->
        <div class="address">
          <span class="address-text" :ref="addressRef">{{ item.address }}</span>
          <!-- 整套 -->
          <span class="unitSummeries-text">{{ title.unit }}</span>
          <span class="unitSummeries-text">·</span>
          <span class="unitSummeries-text">{{ title.unipDesp }}</span>
        </div>

        <!-- 正 -->
        <div class="houseName">
          {{ item.unitName }}
        </div>

        <!-- 早订 -->
        <div class="houseTags">
          <template v-for="(htem, hndex) in item.houseTags" :key="hndex">
            <span
              :style="{ backgroundColor: htem.background.color, color: htem.color }"
              class="houseTags-text"
            >
              {{ htem.text }}
            </span>
          </template>
        </div>

        <div class="Price">
          <span class="finalPrice"> ￥{{ item.finalPrice }} </span>
          <span class="productPrice"> ￥{{ item.productPrice }} </span>
          <div class="priceTipBadge">
            <!-- <span v-if="item.priceTipBadge">{{item.priceTipBadge.text}}</span> -->
            <span class="priceTipBadge-text">
              <img class="sound" src="@/assets/img/search/icon-unit-sound.png" alt="" />
              <span :ref="priceRef">{{ (item.finalPrice / item.productPrice) * 100 }}</span>
              <span>折,早订优惠</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup>
  import { ref, computed } from 'vue'
  const props = defineProps({
    items: {
      type: Object,
      default: () => ({})
    },
  })

  const title = computed(() => {
    return {
      unit: props.items[0]?.unitSummeries[0]?.text,
      unipDesp: props.items[0]?.unitSummeries[1]?.text
    }
  })
  // slice切割折扣多余部分
  const priceRef = (el) => {
    if (el) {
      el.innerHTML = el.innerHTML.slice(0, 1)
    }
  }
  // slice切割地址多余部分
  const addressRef = (el) => {
    if (el) {
      el.innerHTML = el.innerHTML.slice(0, 18)
    }
  }

</script>

<style lang="less" scoped>
  .search-list-item {
    padding: 0 20px 20px 20px;

    .swiper {
      position: relative;
      .banner {
        // width: 335px;
        // height: 230px;
        // padding: 15px 20px;
        .banner-img {
          width: 100%;
          height: 100%;
          
        }
      }
      .custom-indicator {
        position: absolute;
        right: 19px;
        bottom: 12px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        color: #fff;
      }
      .bottom {
        position: absolute;
        bottom: 12px;
        left: 13px;
        background-color: #fff;
        border-radius: 10px;
        height: 18px;
        padding: 2px 10px 2px 10px;
        .score {
          font-weight: 600;
          font-size: 13px;
        }
        .bottom-text {
          font-size: 10px;
          margin-left: 5px;
        }
      }
      .side-bar {
        position: absolute;
        right: 15px;
        top: 10px;
        height: 135px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        .logoUrl {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .heart,
        .message {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-top: 5px;
          .heart-img,
          .message-img {
            width: 30px;
            height: 30px;
          }
          .heart-text,
          .message-text {
            color: #fff;
            font-size: 12px;
          }
        }
      }
    }
    .content {
      .address {
        font-size: 12px;
        margin-top: 5px;
        .address-text {
          color: #fff;
          background-color: #3f4954;
          padding: 0 5px;
      
        }
        .unitSummeries-text {
          margin-left: 5px;
          color: #666;
        }
      }

      .houseName {
        font-size: 18px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 5px;
      }
      .houseTags {
        display: flex;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 5px 0;
        .houseTags-text {
          font-size: 12px;
          padding: 5px;
          margin-left: 5px;
      
        }
      }
      .Price {
        display: flex;
        align-items: baseline;
        .finalPrice {
          font-size: 20px;
          color: #ff9645;
        }
        .productPrice {
          font-size: 12px;
          color: #999;
          margin: 0 5px;
          text-decoration: line-through;
        }
        .priceTipBadge {
          .priceTipBadge-text {
            font-size: 12px;
            color: #fff;
            border-radius: 7px;
            background-image: linear-gradient(-270deg, rgb(251, 74, 74) 1%, rgb(255, 102, 102) 99%);
            padding: 2px 5px 2px 5px;
          }
          .sound {
            width: 10px;
            height: 10px;
            margin-top: 5px;
          }
        }
      }
    }
  }

  // ::-webkit-scrollbar {
  //   width: 0 !important;
  // }
  // ::-webkit-scrollbar {
  //   width: 0px !important;
  //   height: 0px;
  // }
</style>
